<template>
  <div class="je-statis-box" :class="{ 'full-statis': fullWindow }">
    <div class="je-statis-head">
      <div class="je-statis-title">登录人次统计</div>
      <div class="je-statis-operate">
        <!-- 选择年 -->
        <div class="date-switch">
          <je-dropdown
            placement="bottomRight"
            :trigger="['click']"
            :get-popup-container="popupContainer"
          >
            <span class="date-select">
              <span class="date-label">{{ selectYear }}</span>
              <span class="date-arrow"></span>
            </span>
            <DownOutlined />
            <template #overlay overlayStyle>
              <je-menu>
                <je-menu-item
                  v-for="item in optionsYear"
                  :key="item.value"
                  :class="{ 'person-type-foucs': selectYear == item.value }"
                  @click="changeYear(item.value)"
                >
                  <span>{{ item.label }}</span>
                </je-menu-item>
              </je-menu>
            </template>
          </je-dropdown>
        </div>
        <!-- 选择月 -->
        <div class="date-switch">
          <je-dropdown
            placement="bottomRight"
            :trigger="['click']"
            :get-popup-container="popupContainer"
          >
            <span class="date-select">
              <span class="date-label">{{ selectMonthLabel }}</span>
              <span class="date-arrow"></span>
            </span>
            <DownOutlined />
            <template #overlay overlayStyle>
              <je-menu>
                <je-menu-item
                  v-for="item in optionsMonth"
                  :key="item.value"
                  :class="{ 'person-type-foucs': selectMonth == item.value }"
                  @click="changeMonth(item.value, item.label)"
                >
                  <span>{{ item.label }}</span>
                </je-menu-item>
              </je-menu>
            </template>
          </je-dropdown>
        </div>
        <div class="full-box" @click="handleWindow">
          <i :class="{ 'fal fa-expand-arrows': !fullWindow, 'fal fa-expand-alt': fullWindow }"></i>
        </div>
      </div>
    </div>
    <div id="loginChart" class="je-chart-main"></div>
  </div>
</template>

<script>
  import { defineComponent, ref, toRefs, onMounted } from 'vue';
  import * as echarts from 'echarts';
  import { DownOutlined } from '@ant-design/icons-vue';
  import { GetLoginStatistic } from '@/api';
  export default defineComponent({
    name: 'LoginStatis',
    components: {
      DownOutlined,
    },
    setup() {
      const years = [];
      let curYears = new Date().getFullYear();
      for (let i = 0; i < 3; i++) {
        let yearItem = {
          label: (curYears - i).toString(),
          value: (curYears - i).toString(),
        };
        years.push(yearItem);
      }
      const months = [];
      for (let i = 1; i <= 12; i++) {
        let monthItem = {
          label: i + '月',
          value: i.toString(),
        };
        months.push(monthItem);
      }
      let selectYear = ref(years[0].value);
      let selectMonth = ref((new Date().getMonth() + 1).toString());
      let selectMonthLabel = ref(new Date().getMonth() + 1 + '月');
      let fullWindow = ref(false); //是否放大屏幕操作
      const state = {
        optionsYear: years,
        optionsMonth: months,
        myEchart: null,
      };
      const methods = {
        initEcharts(loginData) {
          //初始化图表
          let loginDom = document.getElementById('loginChart');
          state.myEchart = echarts.init(loginDom);
          state.myEchart.clear();
          let valueList = [];
          let dateList = [];
          for (let item of loginData) {
            valueList.push(parseInt(item.count));
            dateList.push(parseInt(item.dateStr.split('-')[2]) + '日');
          }
          let option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                label: {
                  backgroundColor: '#6a7985',
                },
              },
            },
            grid: {
              top: '5%',
              left: '20',
              right: '30',
              bottom: '3%',
              containLabel: true,
            },
            xAxis: [
              {
                type: 'category',
                boundaryGap: false,
                axisLine: {
                  lineStyle: {
                    color: '#cccccc',
                  },
                },
                axisLabel: {
                  color: '#333333',
                },
                data: dateList,
              },
            ],
            yAxis: [
              {
                type: 'value',
                axisLine: {
                  lineStyle: {
                    color: '#cccccc',
                  },
                },
                axisLabel: {
                  color: '#333333',
                },
                splitLine: {
                  lineStyle: {
                    type: 'dashed',
                  },
                },
              },
            ],
            series: [
              {
                name: '登录人次',
                type: 'line',
                emphasis: {
                  focus: 'series',
                },
                lineStyle: {
                  color: '#009dff',
                },
                itemStyle: {
                  color: '#009dff',
                },
                data: valueList,
              },
            ],
          };
          option && state.myEchart.setOption(option);
          // window.addEventListener('resize', () => {
          //   state.myEchart.resize();
          // });
        },
        getLoginData() {
          //获取登录人次统计数据
          GetLoginStatistic({ year: selectYear.value, month: selectMonth.value }).then((res) => {
            if (res.code == 1000 && res.success) {
              methods.initEcharts(res.data);
            }
          });
        },
        changeYear(year) {
          //切换年时间
          selectYear.value = year;
          methods.getLoginData();
        },
        changeMonth(month, monthLabel) {
          //切换月时间
          selectMonth.value = month;
          selectMonthLabel.value = monthLabel;
          methods.getLoginData();
        },
        handleWindow() {
          //窗口扩大/还原操作
          fullWindow.value = !fullWindow.value;
          setTimeout(() => {
            state.myEchart.resize();
          }, 0);
        },
        popupContainer(triggerNode) {
          //窗口滚动依附于父节点滑动
          return triggerNode.parentNode;
        },
      };
      onMounted(() => {
        methods.getLoginData();
      });
      return {
        selectYear,
        selectMonth,
        selectMonthLabel,
        fullWindow,
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style>
  .je-statis-box .date-switch .ant-dropdown .ant-dropdown-content {
    margin-top: 0px;
  }
  .je-statis-box .ant-dropdown .ant-dropdown-content .ant-dropdown-menu-item {
    text-align: center;
  }
</style>
<style scoped lang="less">
  .je-statis-box {
    width: 485px;
    height: 370px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 4px;
    .je-statis-head {
      width: 100%;
      height: 60px;
      padding: 0 20px;
      display: inline-flex;
      align-items: center;
      justify-content: space-between;
      .je-statis-title {
        height: 20px;
        line-height: 20px;
        font-size: 16px;
        font-weight: bold;
        color: #3f3f3f;
      }
      .ant-select {
        width: 80px;
        height: 26px;
        margin-right: 10px;
      }
      .date-switch {
        margin-right: 10px;
        position: relative;
        cursor: pointer;
        .date-select {
          height: 26px;
          line-height: 26px;
          padding: 0 16px;
          display: inline-block;
          background-color: @primary-color;
          color: #ffff;
          border-radius: 14px;
          cursor: pointer;
          .date-label {
            font-size: 14px;
            color: #ffffff;
            padding-right: 4px;
          }
          .date-arrow {
            width: 0;
            height: 0;
            border-left: 4px solid transparent;
            border-right: 4px solid transparent;
            border-top: 7px solid #ffffff;
            font-size: 0;
            line-height: 0;
          }
          .person-type-foucs {
            font-weight: 700;
            color: @primary-color;
            background-color: @je-menu-item-active-bg;
          }
        }
      }
      .je-statis-operate {
        display: inline-flex;
        align-items: center;
        .full-box {
          cursor: pointer;
          i {
            font-size: 14px;
            color: #adadad;
          }
        }
      }
    }
    .je-chart-main {
      width: 100%;
      height: 290px;
    }
  }
  .full-statis {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    border-radius: 0px;
    z-index: 100;
    .je-chart-main {
      height: calc(100vh - 60px);
    }
  }
</style>
